import React, {useEffect, useRef, useState} from "react";
import "./index.scss"; // 引入样式文件
import {ESGltfModel, ESImageLabel, type ESJVector2D} from "earthsdk3";
// @ts-ignore
import {ESObjectsManager, type ESSceneObject} from "earthsdk3";
import {ESUeViewer} from "earthsdk3-ue";
import {ESCesiumViewer} from "earthsdk3-cesium";
import {createAnimateFrame} from "xbsj-base";
import {getDistancesFromPositions} from "earthsdk3";
// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESUeViewer, ESCesiumViewer);
const FlyPosition: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!containerRef.current) return;
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            show: true,
            type: "ESImageryLayer",
            maximumLevel: 18,
            name: "全球影像",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });
        // 创建 Cesium 视口
        const viewer = objm.createCesiumViewer(containerRef.current);
        objm.viewerCreatedEvent.don((viewer) => {

        });
        console.log("viewer", viewer);
        // 通过json创建一个影像图层,加载全球影像切片

    }, []);


    return (
        <div className="box">
            <div className="container" ref={containerRef}></div>

        </div>
    );
};

export default FlyPosition;
